import React, { useState } from 'react';
import './Gallery.css';

interface GalleryItem {
  id: number;
  title: string;
  description: string;
  gradient: string;
  emoji: string;
}

const Gallery: React.FC = () => {
  const [activeItem, setActiveItem] = useState<number | null>(null);

  const galleryItems: GalleryItem[] = [
    {
      id: 1,
      title: '梦幻风景',
      description: 'AI绘制的超现实风景画',
      gradient: 'linear-gradient(45deg, #667eea, #764ba2)',
      emoji: '🎨'
    },
    {
      id: 2,
      title: '动态艺术',
      description: 'AI生成的动态艺术作品',
      gradient: 'linear-gradient(45deg, #ff6b6b, #ff8e8e)',
      emoji: '🎬'
    },
    {
      id: 3,
      title: '虚拟人物',
      description: '栩栩如生的数字人形象',
      gradient: 'linear-gradient(45deg, #4ecdc4, #44a08d)',
      emoji: '👤'
    },
    {
      id: 4,
      title: '智能动作',
      description: '精准的动作模仿技术',
      gradient: 'linear-gradient(45deg, #f093fb, #f5576c)',
      emoji: '🎭'
    },
    {
      id: 5,
      title: '创意插画',
      description: 'AI创作的独特插画作品',
      gradient: 'linear-gradient(45deg, #ffecd2, #fcb69f)',
      emoji: '🖼️'
    },
    {
      id: 6,
      title: '未来科技',
      description: '科幻风格的AI生成内容',
      gradient: 'linear-gradient(45deg, #a8edea, #fed6e3)',
      emoji: '🚀'
    }
  ];

  return (
    <section className="gallery" id="gallery">
      <div className="container">
        <h2 className="section-title">精彩作品</h2>
        <div className="gallery-grid">
          {galleryItems.map((item, index) => (
            <div 
              key={item.id}
              className={`gallery-item fade-in-up ${activeItem === item.id ? 'active' : ''}`}
              style={{ 
                animationDelay: `${index * 0.1}s`,
                background: item.gradient
              }}
              onMouseEnter={() => setActiveItem(item.id)}
              onMouseLeave={() => setActiveItem(null)}
            >
              <div className="gallery-content">
                <div className="gallery-emoji">{item.emoji}</div>
                <div className="gallery-overlay">
                  <h4>{item.title}</h4>
                  <p>{item.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Gallery;
